<template>
    <div class="temperatureDetail1"></div>
</template>

<style lang="less" scoped>
.temperatureDetail1 {
    height: 250px;
    width: 100%;
    text-align: center;
}
</style>

<script>
export default {
    name: 'temperatureChart1',
    props: {
        data: Number
    },
    data() {
        return {
            temperatureChart1: null
        }
    },
    methods: {
        setChart() {
            let option = {
                series: [
                    {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 150,
                        splitNumber: 5,
                        itemStyle: {
                            color: '#FFAB91'
                        },
                        progress: {
                            show: true,
                            width: 10
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10
                            }
                        },
                        axisTick: {
                            distance: -15,
                            splitNumber: 5,
                            lineStyle: {
                                width: 0,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            distance: 5,
                            length: 5,
                            lineStyle: {
                                width: 3,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 10,
                            color: '#999',
                            fontSize: 15
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 40,
                            borderRadius: 8,
                            offsetCenter: [0, '-15%'],
                            fontSize: 20,
                            fontWeight: 'bolder',
                            formatter: '{value} °C',
                            color: 'inherit'
                        },
                        data: [
                            {
                                value: this.data,
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 150,
                        itemStyle: {
                            color: '#FD7347'
                        },
                        progress: {
                            show: true,
                            width: 4
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [
                            {
                                value: this.data,
                                name: "反应器温度"
                            }
                        ]
                    }
                ]
            };
            if (!this.temperatureChart1)
                this.temperatureChart1 = this.$echarts(this.$el);
            this.temperatureChart1.clear();
            this.temperatureChart1.resize()
            this.temperatureChart1.setOption(option);
        },
    },
    mounted() {
        this.setChart();
        this.intervalId = setInterval(() => {
            this.temperatureChart1.setOption({
                series: [
                    {
                        data: [
                            {
                                value: this.data
                            }
                        ]
                    },
                    {
                        data: [
                            {
                                value: this.data,
                                name: "反应器温度"
                            }
                        ]
                    }
                ]
            });
        }, 2000);
    }
}
</script>
